(function ($) {
	$.xhPicker = $.Class.extend({
		init:function(layer,title,pickerId){
			var self = this;
			self.pickerId = pickerId;
			self.layer = layer
			var picker = document.getElementById('#'+pickerId);
			if (picker) {
				return;
			}
			picker = document.createElement('div');
			document.body.appendChild(picker)
			picker.id = pickerId
			picker.setAttribute('class','mui-popover xhPicker')
			var layer2Str=''
			if (layer == 2) {
				picker.classList.add('layer2')
				layer2Str = '<div class="mui-scroll-wrapper" id="xhWrapper2">'+
						'<div class="mui-scroll"><ul class="mui-table-view xhTableView2"></ul></div>'+
					'</div>'
			}
			picker.innerHTML = '<div class="picker-head">'+title+'</div>'+
				'<div class="picker-close mui-icon mui-icon-close"></div>'+
				'<div class="mui-scroll-wrapper" id="xhWrapper1">'+
					'<div class="mui-scroll"><ul class="mui-table-view xhTableView1"></ul></div>'+
				'</div>'+layer2Str+
				'<div class="xhBottomArea">'+
					'<div class="mui-btn mui-btn-primary xhCancelBtn">取消</div>'+
					'<div class="mui-btn mui-btn-primary xhSureBtn">确定</div>'+
				'</div>';
			
			mui('#'+pickerId+' .mui-scroll-wrapper').scroll();
			mui('#'+pickerId).on('tap','.xhCancelBtn',function(){
				mui('#'+pickerId).popover('hide')
			})
			mui('#'+pickerId).on('tap','.picker-close',function(){
				mui('#'+pickerId).popover('hide')
			}) 
			mui('#'+pickerId).on('tap','.xhSureBtn',function(){
				mui('#'+pickerId).popover('hide')
				var old = mui('#'+pickerId+' .xhTableView1 li.dhc-active')[0]
				if (old) {
					if (self.block) {
						var item1 = self.sourceArr[old.getAttribute('data-index')]
						var index2 = mui('#'+pickerId+' .xhTableView1 li.dhc-active')[0]
						if (layer == 2) {
							if (index2) {
								index2 = index2.getAttribute('data-index')
								self.block([item1,item1['children'][index2]],old.getAttribute('data-index'),)
							}
						}else{
							self.block([item1],old.getAttribute('data-index'))
						}
					}
				}
			})
			mui('#'+pickerId+' .xhTableView1').on('tap','li',function(){
				var old = mui('#'+pickerId+' .xhTableView1 li.dhc-active')[0]
				if (old) {
					old.classList.remove('dhc-active')
				}
				this.classList.add('dhc-active')
			})
			mui('#'+pickerId+' .xhTableView2').on('tap','li',function(){
				var old = mui('#'+pickerId+' .xhTableView2 li.dhc-active')[0]
				if (old) {
					old.classList.remove('dhc-active')
				}
				this.classList.add('dhc-active')
			})
		},
		setData:function(dataArr,title){
			var self = this;
			if (title) {
				mui('#'+self.pickerId +' .picker-head')[0].innerText = title
			}
			self.sourceArr = dataArr
			var html = ''
			for (var i = 0; i < dataArr.length; i++) {
				var oneDict = dataArr[i]
				html += '<li class="mui-table-view-cell" data-index="'+i+'">'+oneDict['text']+'</li>'
			}
			mui('#'+self.pickerId+' .xhTableView1')[0].innerHTML = html;
			if (self.layer == 2) {
				var html2 = ''
				var data2 = dataArr[0]['children']
				for (var i = 0; i < data2.length; i++) {
					var oneDict = data2[i]
					html2 += '<li class="mui-table-view-cell" data-index="'+i+'">'+oneDict['text']+'</li>'
				}
				mui('#'+self.pickerId+' .xhTableView2')[0].innerHTML = html2;
			}
		},
		show:function(block){
			var self = this;
			self.block = block
			mui('#'+self.pickerId).popover('show')
		},
		setSelectIndex:function(index1,index2){
			var self = this;
			var old = mui('#'+self.pickerId+' .xhTableView1 li.dhc-active')[0]
			if (old) {
				old.classList.remove('dhc-active')
			}
			var thisli = mui('#'+self.pickerId+' .xhTableView1 li[data-index="'+index1+'"]')[0]
			if (thisli) {
				thisli.classList.add('dhc-active')
			}
			if (index2 != null && index2 != undefined) {
				var old = mui('#'+self.pickerId+' .xhTableView2 li.dhc-active')[0]
				if (old) {
					old.classList.remove('dhc-active')
				}
				var thisli = mui('#'+self.pickerId+' .xhTableView2 li[data-index="'+index2+'"]')[0]
				if (thisli) {
					thisli.classList.add('dhc-active')
				}
			}
		}
	});
})(mui)